import type { Skill, PlayerCategory } from "@/lib/types"

interface SkillBadgesProps {
  skills: Skill[]
  category: PlayerCategory
}

export default function SkillBadges({ skills, category }: SkillBadgesProps) {
  return (
    <div className="flex flex-wrap gap-1">
      {skills.map((skill) => (
        <div key={skill.name} className={`px-2 py-0.5 rounded text-xs font-medium ${getTierBadgeColor(skill.tier)}`}>
          {skill.tier}
        </div>
      ))}
    </div>
  )
}

function getTierBadgeColor(tier: string): string {
  if (tier.startsWith("HT1")) return "bg-yellow-500/20 text-yellow-200"
  if (tier.startsWith("LT1")) return "bg-yellow-600/20 text-yellow-300"
  if (tier.startsWith("HT2")) return "bg-blue-500/20 text-blue-200"
  if (tier.startsWith("LT2")) return "bg-blue-600/20 text-blue-300"
  if (tier.startsWith("HT3")) return "bg-orange-500/20 text-orange-200"
  if (tier.startsWith("LT3")) return "bg-orange-600/20 text-orange-300"
  if (tier.startsWith("HT4")) return "bg-purple-500/20 text-purple-200"
  if (tier.startsWith("LT4")) return "bg-purple-600/20 text-purple-300"
  if (tier.startsWith("HT5")) return "bg-red-500/20 text-red-200"
  return "bg-red-600/20 text-red-300"
}

